<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { margin: 0; padding: 0; }
        #father {
            display: none;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
        }
        #son {
            position: absolute;
            width: 30%;
            height: 30%;
            top: 50%;
            margin-top: -15%;
            left: 35%;
            background-color: #fff;
        }

    </style>
</head>
<body>

<button id="btn1">打开模态窗</button>


<div id="father">
    <div id="son"></div>
</div>

<script>
window.onload = function(){
    var btn1 = document.getElementById('btn1');
    var father = document.getElementById('father');
    var son = document.getElementById('son');
    btn1.onclick = function(event){
        father.style.display = 'block';
        var event = event || window.event;
        if( event.stopPropagation ){
            event.stopPropagation();
        }else{
            event.cancelBubble;
        }
    };
    document.onclick = function(event){

        var event = event || window.event;
        var target = event.target || event.srcElement;
        if( target.id !== 'son' ){
            father.style.display = 'none';
        }else{
            father.style.display = 'block';
        }
    };
}


</script>



</body>
</html>